---
title: Lista vertical
description: Guía para usar Fluid DnD con una sola lista vertical.
---

import SingleVerticalList from "@/components/vue/SingleVerticalList.vue";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de número

Para mostrar como usar **Fluid DnD** para ordenar una simple lista.
Primero, vamos a crear una lista de números:

export const listOfNumbers = `<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);
const [ parent ] = useDragAndDrop(list);

</script>`;

<Code code={listOfNumbers} lang="vue" />

Después, crear las lista de números en la vista:

export const listOfNumbersHTML = `
<template>
  <ul class="number-list">
    <li class="number">{{ element }}</li>
  </ul>
</template>
<style>
  .number {
    border-style: solid;
    padding-left: 5px;
    margin-top: 0.25rem;
    border-width: 2px;
  }
  .number-list {
    display: block;
    padding: 10px;
  }
</style>
`;

<Code code={listOfNumbersHTML} lang="vue" />

:::caution
Evita confirar la propiedad `transform` o las propiedades de `transition` entre diferentes valores de `transform` a los elementos **draggable** debido a que **Fluid DnD** cambia estas propiedades automáticamente.
:::

### Añadiendo referencia al elemento padre

Primero, añademos una referencia al elemento `parent`creado de `useDragAndDrop`:

export const highlightsDroppable = ["droppable-id", "direction", "items"];

export const listOfNumbersDroppable = `
<template>
  <ul ref="parent" class="number-list">
      <li class="number">{{ element }}</li>
   </ul>
</template>
`;

<Code code={listOfNumbersDroppable} lang="vue" mark={highlightsDroppable} />

### Añadiendo referencia a los elementos hijos

Por cada elemento `<li>` solo pasaremos el **atributo** `index` para saber su posición actual:

export const listOfNumbersDraggable = `

<template>
    <ul ref="parent" class="number-list">
      <li class="number" v-for="(element, index) in list" :index="index">
        {{ element }}
      </li>
    </ul>
</template>`;

export const highlightsDraggable = [':index="index"'];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />

### Resultado

<div class="pl-8">
  <SingleVerticalList client:load />
</div>
